import React, { FC, useEffect, useState } from 'react'
import {inject,observer} from "mobx-react"
import { useNavigate, useParams } from 'react-router-dom'
import Mytitle from '../../../../components/Mytitle'
import moment from 'moment'
import { ajax } from '../../../../api'
import { Col, Row,Image, Tag, Button } from 'antd'
import { baseURL } from '../../../../api/request'
import { annoTypeList } from '../../../../utils'
const  Detailed:FC<any>=()=> {
    const [obj,setObj] = useState<any>(null)
    const params = useParams()
    const navigate = useNavigate()
    console.log(params);

    //获取公告信息，
    useEffect(()=>{
        ajax.getannoone({
            _id:params.aid 
        })
        .then(res=>{
            if(res.code==200){
                setObj(res.result)
            }
        })
    },[])
    
  return (
    <div style={{position:"relative"}}>
        <Mytitle text="公告详情"></Mytitle>
        <Button type="primary" style={{position:"absolute",bottom:"10px",left:"10px"}} onClick={()=>navigate(-1)}>返回上一级</Button>  
        <Row>
            <Col span={12} offset={6}>
                {
                    obj&&<div
                    style={{padding:10,border:"1px solid #333",borderRadius:"10px",width:"400px",height:"400px",overflow:"auto",position:"relative"}}
                    >
                        <p style={{textAlign:"center"}}><Mytitle text={obj.title}></Mytitle></p>
                        <div style={{width:"100%",height:"200px",display:"flex",alignItems:"center",flexDirection:"column"}}>
                            <Image src={obj.desc.replace(/public/,baseURL)} preview={false} style={{width:"100%",height:"200px"}}></Image>
                        </div>
                        <div>
                            {obj.content}
                        </div>
                        
                        <div style={{position:"absolute",bottom:'20px'}}>
                        <p>
                           发布时间： {moment(obj.time).format("YYYY-MM-DD HH:mm:SS")}
                        </p>
                            <span style={{display:"inline-block",marginRight:"20px"}}>发布人：{obj.info.username} </span> 
                            <Tag color={  annoTypeList.find((item:any)=>item.value==obj.type)?.color}> 
                                {annoTypeList.find((item:any)=>item.value==obj.type)?.label}
                            </Tag>
                        </div>


                    </div>

                }
            </Col>
        </Row>
    </div>
  )
}
export default inject('anno')(observer(Detailed))